<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <!-- 引入 ECharts 文件 -->
 <script src="./node_modules/echarts/dist/echarts.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
            // 背景色
            backgroundColor: '#2c343c',
            //标题
            // title: {
            //     text: 'Customized Pie',
            //     left: 'center',
            //     top: 20,
            //     textStyle: {
            //         color: '#ccc'
            //     }
            // },
            //鼠标移入的提示框
            tooltip: {
                trigger: 'item'
            },

            // visualMap: {
            //     show: true,
            //     min: 80,
            //     max: 600,
            //     inRange: {
            //         colorLightness: [0, 1]
            //     }
            // },
            series: [{
                //系列名称
                name: '点位分布统计',
                //饼图
                type: 'pie',
                //半径
                radius: [10, 90],
                //圆心的位置
                center: ['50%', '50%'],//可以用来更改圆的位置，当前是在中心
                //数据
                data: [{
                        value: 110,
                        name: '云南'
                    },
                    {
                        value: 160,
                        name: '北京'
                    },
                    {
                        value: 180,
                        name: '山东'
                    },
                    {
                        value: 180,
                        name: '河北'
                    },
                    {
                        value: 160,
                        name: '江苏'
                    },
                    {
                        value: 200,
                        name: '浙江'
                    },
                    {
                        value: 280,
                        name: '四川'
                    },
                    {
                        value: 335,
                        name: '湖北'
                    }
                ],
                //不需要排序
                //.sort(function (a, b) { return a.value - b.value; }),
                //是否用圆心角和半径 区分数据的大小
                roseType: 'radius',
                //图例文字的颜色
                // label: {
                //     color: ''
                // },
                //引导线
                labelLine: {
                    //引导线的样式
                    lineStyle: {
                        //引导线的颜色
                        //color: 'rgba(0, 255, 0, 0.3)'
                    },
                    //是否平滑视觉引导线，默认不平滑，可以设置成 true 平滑显示，
                    //也可以设置为 0 到 1 的值，表示平滑程度
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                },

                itemStyle: {
                    // color: '#c23531',
                    // shadowBlur: 200,
                    // shadowColor: 'rgba(0, 0, 0, 0.5)'
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>